<template>
  <div>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-if="config.confirmNumber!=undefined"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >

        <van-cell center title="添加新配置" icon="plus" @click="addCity"/>
        <van-uploader :after-read="onUploadTopImg" :accept="'image/*'">
          <van-field style="width: 100vw;" v-model="config.top_img" @click="" label="顶部图片" input-align="right"/>
        </van-uploader>
        <van-field v-model="config.top_src"@blur="onFucus"  label="顶图跳转地址" input-align="right"/>
        <van-field v-model="config.confirmNumber.confirm" @blur="onFucus" label="确诊人数" type="digit"
                   input-align="right"/>
        <van-field v-model="config.confirmNumber.yisi" @blur="onFucus" label="疑似人数" type="digit" input-align="right"/>
        <van-field v-model="config.confirmNumber.safe" @blur="onFucus" label="治愈人数" type="digit" input-align="right"/>
        <van-field v-model="config.confirmNumber.die" @blur="onFucus" label="死亡人数" type="digit" input-align="right"/>
        <van-uploader :after-read="onUploadBottomImg" :accept="'image/*'">
          <van-field style="width: 100vw;" v-model="config.bottom_img" label="底部图片"
                     input-align="right"/>
        </van-uploader>
        <van-field v-model="config.bottom_src" @blur="onFucus"  label="底图跳转地址" input-align="right"/>
        <van-field v-model="config.view_count" @blur="onFucus" label="浏览人数" type="digit" input-align="right"/>
        <van-field v-model="config.update_time" @blur="onFucus" label="更新时间" input-align="right"/>
      </van-list>
    </van-pull-refresh>
    <!--添加弹窗-->
    <van-popup
      style="padding:.5rem;border-radius: 12px"
      v-model="addShow"
      position="center"
      :style="{ height: '150px' }"
    >

      <van-row type="flex" justify="space-between">
        <van-col span="24">
          <!-- 输入任意文本 -->
          <van-cell-group>
            <van-field v-model="form.name" label="城市名称" placeholder="请输入城市名称"/>

            <van-field v-model="form.value" type="digit" label="人数" placeholder="请输入人数"/>
          </van-cell-group>
        </van-col>

      </van-row>
      <!-- 两端对齐 -->
      <van-row type="flex" justify="space-between">
        <van-col span="24">
          <van-button block @click="addShow=false">取消</van-button>
        </van-col>
        <van-col span="24">
          <van-button block @click="addConfirmNumber">确定</van-button>
        </van-col>
      </van-row>
    </van-popup>
    <!--编辑弹窗-->
    <van-popup
      style="padding:.5rem;border-radius: 12px"
      v-model="editShow"
      position="center"
      :style="{ height: '150px' }"
    >

      <van-row type="flex" justify="space-between">
        <van-col span="24">
          <!-- 输入任意文本 -->
          <van-cell-group>
            <van-field v-model="form.name" label="城市名称" placeholder="请输入城市名称"/>

            <van-field v-model="form.value" type="digit" label="人数" placeholder="请输入人数"/>
          </van-cell-group>
        </van-col>

      </van-row>
      <!-- 两端对齐 -->
      <van-row type="flex" justify="space-between">
        <van-col span="24">
          <van-button block @click="editShow=false">取消</van-button>
        </van-col>
        <van-col span="24">
          <van-button block @click="editConfirmNumber">确定</van-button>
        </van-col>
      </van-row>
    </van-popup>
    <img class="top" src="../../assets/image/top.png" @click="toTop"/>
  </div>
</template>

<script>
  import {Notify} from 'vant';

  export default {
    name: "Config",
    data() {
      return {
        config: {},
        loading: false,
        finished: false,
        page: 0,
        refreshing: false,
        addShow: false,
        editShow: false,
        form: {},
        Loop: null
      }
    },
    mounted() {
      this.getData();
    },
    methods: {
      onUploadTopImg(file) { // 上传图片到图片服务器
        let fd = new FormData()
        fd.append('file', file.file)
        Notify({type: 'warning', message: '上传中...'});
        this.$post('/admin/upload', fd, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(res => {
          this.config.top_img = res.data.url //这里上传到指定的图片服务器，成功后会返回图片的url
          this.$post("/config/update", {config: this.config}).then(res => {
            if (res.code == 0) {
              Notify({type: 'success', message: '更新成功'});
            }else{
              Notify({type: 'danger', message: '更新失败,'+res.msg});
            }
          })
        }).catch(err => {
          alert(err)
        })
      },
      onUploadBottomImg(file) { // 上传图片到图片服务器
        let fd = new FormData()
        fd.append('file', file.file)
        Notify({type: 'warning', message: '上传中...'});
        this.$post('/admin/upload', fd, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(res => {
          this.config.bottom_img = res.data.url //这里上传到指定的图片服务器，成功后会返回图片的url
          this.$post("/config/update", {config: this.config}).then(res => {
            if (res.code == 0) {
              Notify({type: 'success', message: '更新成功'});
            }
          })
        }).catch(err => {
          alert(err)
        })
      },
      onFucus() {
        Notify({type: 'warning', message: '更新中...'});
        this.$post("/config/update", {config: this.config}).then(res => {
          if (res.code == 0) {
            Notify({type: 'success', message: '更新成功'});
          }
        })
      },
      onRefresh() {
        this.page = 0;
        // 清空列表数据
        this.finished = false;

        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        this.onLoad();
      },
      onLoad() {
        this.getData();
      },
      getData() {
        if (this.refreshing) {
          this.config = {};
          this.refreshing = false;
        }
        this.page++
        this.loading = true;
        this.$get("/config/list", {page: this.page}).then(res => {
          if (res.code == 1) {
            this.loading = false;
            return;
          }
          this.finished = true;
          this.loading = false;
          this.config = res.data;
          console.log(this.config.confirmNumber);
        }).catch(function (err) {
          console.log(err);
        });
      },
      addCity() {
        this.form = {};
        this.addShow = true;
      },
      addConfirmNumber() {

        if (this.form.name == "" || this.form.name == undefined) {
          Notify({type: 'danger', message: '请输入城市名称'});
          return;
        }
        if (this.form.value == "" || this.form.value == undefined) {
          Notify({type: 'danger', message: '请输入人数'});
          return;
        }
        this.$post("/config/add", this.form).then(res => {
          if (res.code == 1) {
            Notify({type: 'danger', message: '添加失败，' + res.msg});
            return;
          }
          Notify({type: 'success', message: '添加成功'});
          this.onRefresh();
          this.addShow = false;
        })
      },
      editCity(index) {
        this.form = this.list[index];
        this.editShow = true;
      },
      editConfirmNumber() {

        if (this.form.name == "" || this.form.name == undefined) {
          Notify({type: 'danger', message: '请输入城市名称'});
          return;
        }
        if (this.form.value == "" || this.form.value == undefined) {
          Notify({type: 'danger', message: '请输入人数'});
          return;
        }
        this.$post("/config/update", this.form).then(res => {
          if (res.code == 1) {
            Notify({type: 'danger', message: '修改失败，' + res.msg});
            return;
          }
          Notify({type: 'success', message: '修改成功'});
          this.onRefresh();
          this.editShow = false;
        })
      },
      showDeleteButton(index) {
        console.log("touchestart")
        clearTimeout(this.Loop); //再次清空定时器，防止重复注册定时器
        this.Loop = setTimeout(function () {
          this.deleteData(index)
        }.bind(this), 1000);
      },
      emptyTime() {
        clearTimeout(this.Loop); //清空定时器，防止重复注册定时器
      },
      deleteData(index) {
        Notify({type: 'success', message: '长按事件'});
      },
      toTop() { //回到顶部动画
        document.documentElement.scrollTop -= 80;
        if (document.documentElement.scrollTop > 0) {
          var c = setTimeout(() => this.toTop(80), 16);
        } else {
          clearTimeout(c);
        }
      },
    }
  }
</script>

<style scoped>

  * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .top {
    position: fixed;
    right: 1rem;
    bottom: 2rem;
    width: 3rem;
  }

  .van-uploader__input-wrapper {
    width: 100vw;
  }
</style>
